<template>
  <div>
    <span>水平居中</span>
    <div class="box">
      <div class="box2"></div>
    </div>
  </div>
</template>
<style  scoped>
.box {
  background-color: brown;
  height: 500px;
  width: 100%;
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  
  /* position: relative; */
}
.box2 {
  background-color: chartreuse;
  width: 200px;
  height: 200px;
  margin: auto;
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); */
}
</style>